<template>
  <div style="margin:40px">
    <h2>我是父组件，此页面还包括一个子组件</h2>

    <slotChild :books="books">
      <!-- 1:子组件接受一个父组件prop数组books -->
      <!-- 匿名插槽 -->
      <p>我是一个无名卡槽,我写在父组件中在子组件中用slot渲染内容，如果父组件中有内容使用父组件，父组件中没有使用子组件内容</p>

      <br>
      <!-- 具名插槽 -->
      <h3 slot="header">头部信息，我是一个具名卡槽，写在父组件中，在子组件中用slot声明name渲染</h3>
      <h3 slot="footer">底部信息，我是一个具名卡槽，写在父组件中，在子组件中用slot声明name渲染</h3>

      <!-- 作用域卡槽 -->
      <template slot-scope="scope">
        <p>来自父组件的内容</p>
        <p>{{scope.msg}}</p>
      </template>

      <!-- 作用域卡槽最具有代表性的事例是列表组件，允许自定义列表 -->
      <!-- 2：然后使用具名卡槽将它在子组件中name为book的slot上使用v-for指令循环，同时暴露出一个变量bookName -->
      <template slot="book" slot-scope="props">
        <li>{{props.bookName}}</li>
      </template>
    </slotChild>

    <!-- slot自定义面板 -->
    <el-collapse accordion>
      <el-collapse-item title="反馈 Feedback">
        <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
        <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
      </el-collapse-item>

      <el-collapse-item>
        <!-- 从上面继承下来的title具名卡槽 -->
        <template slot="title">
          一致性 Consistency
          <i class="header-icon el-icon-info"></i>
          <p style="display:inline;">哈哈哈哈</p>
        </template>
        <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
        <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import slotChild from '@/views/Vue/slotStudy/slotChild'
export default {
  name: 'solt',
  components: {
    slotChild
  },
  data () {
    return {
      books: [
        { name: '我是大美女系列' },
        { name: '大美女是我系列' },
        { name: '王小花是个大美女系列' }
      ]
    }
  }
}
</script>